<template>
  <view class="uv-chat" :style="chatStyle">
    <view :style="avatarStyle" class="avatar-view" @click="onAvatarClick">
      <up-avatar :src="message.sendUserAvatar"></up-avatar>
    </view>
    <view class="msg">
      <view v-if="showNick" class="nick" :style="nickStyle">
        <text>{{ message.sendUserName }}</text>
      </view>
      <uv-chat-text
        v-if="message.type === 'TEXT'"
        :content="message.content"
        :me="meFlag"
      ></uv-chat-text>
      <uv-chat-image
        v-if="message.type === 'IMAGE'"
        :src="message.mediaFile"
        :upload-flag="message.uploadFlag"
        :media-width="message.mediaWidth"
        :media-height="message.mediaHeight"
        :me="meFlag"
      ></uv-chat-image>
      <uv-chat-video
        v-if="message.type === 'VIDEO'"
        :src="message.mediaFile"
        :video-cover="message.videoCover"
        :video-duration="message.videoDuration"
        :media-width="message.mediaWidth"
        :media-height="message.mediaHeight"
        :upload-flag="message.uploadFlag"
        :me="meFlag"
      ></uv-chat-video>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ChatMessageVo } from '@/types/IMMessageDTO.ts';

import uvChatImage from './chat-image.vue';
import uvChatText from './chat-text.vue';
import uvChatVideo from './chat-video.vue';


import useUserStore from '@/store/modules/user';

const userStore = useUserStore();

const props = defineProps({
  message: {
    type: Object as () => ChatMessageVo,
    default: () => ({})
  },
  nickColor: {
    type: String,
    default: () => '#aaa'
  },
  showNick: {
    type: Boolean,
    default: () => true
  }

});

const meFlag = computed(() => {
  return  props.message.sendUserId === userStore.userId
});

let avatarStyle = computed(() => {
  if (meFlag.value) {
    return {
      'order': 1
    };
  }
  return {
    'order': 0
  };
});
let chatStyle = computed(() => {
  if (meFlag.value) {
    return {
      'justify-content': 'flex-end'
    };
  }
  return {};
});
let nickStyle = computed(() => {

  let style = {
    'color': props.nickColor
  };
  if (meFlag.value) {
    style = {
      ...style,
      'text-align': 'right'
    };
  }else {
    style = {
      ...style,
      'text-align': 'left'
    };
  }

  return style;
});

// 头像单击
const handleAvatarClick = () => {

};
// 头像双击
const handleAvatarClickDb = () => {

};

let lastAvatarClickTime = 0;
const onAvatarClick = () => {
  lastAvatarClickTime += 1;
  setTimeout(() => {

    if (lastAvatarClickTime == 1) {
      handleAvatarClick();
    }
    if (lastAvatarClickTime >= 2) {
      handleAvatarClickDb();
    }
    lastAvatarClickTime = 0;
  }, 200);

};
</script>
<style scoped lang="scss">
.uv-chat {
  display: flex;
  margin-bottom: 35rpx;

  .avatar-view {
    font-size: 0px;
    order: 0;

    image {
      width: 76rpx;
      height: 76rpx;
      border-radius: 14rpx;
    }
  }

  .msg {
    display: flex;
    flex-direction: column;
    margin: 0px 10rpx;

    .nick {
      margin-bottom: 12rpx;
      font-size: 21rpx;
      color: #aaa;
    }


  }

}

.left {
  justify-content: flex-end;
}
</style>
